<template>
  <div class="bin-box">
    <div class="bin-top">
      <div class="bintop-l">
        <i class="i1"></i>
        <div class="b-to">
          <span>手机</span>
          <div class="b-span">
            使用手机号注册：
            <span v-show="profile.shortUserName">{{ profile.shortUserName }}</span>
            <a class="b-span1" @click="modification = true">修改</a>
          </div>
        </div>
      </div>
      <div class="bintop-r">
        <el-button>修改密码</el-button>
      </div>
    </div>
    <div class="bin-text">
      <span
        >绑定帐号后，你可以分享音乐给那边的朋友们，还可以直接用其登录云音乐</span
      >
    </div>
    <div class="bin-top" v-for="(binging, index) in bindings" :key="index">
      <div class="bintop-l">
        <i :class="imgclass[index]"></i>
        <div class="b-to">
          <span>{{ names[index] }}</span>
          <div class="b-span" v-if="binging.expired">
            已绑定
            <span v-if="binging.pares">{{
              binging.pares.name || binging.pares.nickname
            }}</span>
          </div>
        </div>
      </div>
      <div class="bintop-r">
        <div>
          <el-button v-show="binging.expired == false">+ 绑定</el-button>
        </div>
        <div>
          <el-button v-show="binging.expired">{{
            changeremove ? "解除绑定" : "已绑定"
          }}</el-button>
        </div>
      </div>
    </div>

    <el-dialog title="更换手机号" :visible.sync="modification" width="30%">
      <span class="el-dialog-span" v-if="verify == 1">
        <div class="el-dialog-r">
          <a class="a1 i1">
            <i class="stop"></i>
            <span @click="changeverify">原手机已停用</span>
            <span class="span">(使用其他方式验证)</span>
          </a>
        </div>
        <div class="el-dialog-r">
          <a class="a1">
            <i></i>
            <span>原手机已停用</span>
            <span class="span">(使用其他方式验证)</span>
          </a>
        </div>
      </span>

      <span class="el-dialog-span2" v-if="verify == 2">
        <a @click="open">
          <i class="i1"></i>
          <span>点击使用微信验证</span>
        </a>
        <a>
          <i></i>
          <span>点击使用QQ验证</span>
        </a>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import QRCode from "qrcode";
export default {
  data() {
    return {
      imgclass: ["wangyi", "wenbo", "qq", "wx"],
      names: ["网易邮箱账号", "新浪微博", "QQ", "微信"],
      changeremove: false,

      //   个人信息
      profile: {},
      //   关闭提示框
      modification: false,
      //   验证1
      verify: 1,
    };
  },
  mounted() {
    this.changebindings();
    this.getUserAccount();
  },
  methods: {
    changebindings() {
      if (this.bindings.length > 0) {
        // 添加一个新属性
        this.bindings.forEach((item) => {
          item.pares = JSON.parse(item.tokenJsonStr);
        });
      }
    },
    async getUserAccount() {
      
     if(this.cookie){
           const result = await this.$API.reqUserAccount({ cookie: this.cookie });
        //    console.log(result)
        if (result.code == 200) {
          this.profile = result.profile;
        } else {
          this.$msg.error("获取个人失败");
        }
     }
    },
    async open() {
      //解析二维码QRCode
      const url = await QRCode.toDataURL(
        "https://music.163.com/login?codekey=c52dd665-0d1a-40ba-9b3f-c8ec32c586e8"
      );
      console.log(url);
    },
    changeverify() {
      // console.log("qu1");
      this.verify = 2;
    },
  },
  computed: {
    ...mapState({
      //cookie
      cookie: (state) => {
        return state.User.loginmessage.cookie || "";
      },
      bindings: (state) => {
        return state.User.loginmessage.bindings || [];
      },
    }),
  },
};
</script>

<style lang="less" scoped>
// 网易
.wangyi {
  background-position: -208px -340px;
}
.wenbo {
  background-position: -70px -130px;
}
.qq {
  background-position: 0 -666px;
}
.wx {
  background-position: -93px -666px;
}

.bin-box {
  margin-top: 30px;
  .bin-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(248, 248, 248);
    border: solid 1px #dfdfdf;
    height: 100px;
    .bintop-l {
      display: flex;
      align-items: center;
      .i1 {
        background-position: 0 -130px;
      }
      i {
        display: block;
        margin: 7px 7px 0 38px;
        width: 58px;
        height: 58px;
        background-image: url("~@/assets/image/logo.png");
      }
      .b-to {
        color: rgb(123, 120, 120);
        .b-span {
          color: #000;
          font-size: 12px;
          line-height: 20px;
          .b-span1 {
            margin-left: 10px;
            color: rgb(12, 115, 194);
          }
        }
      }
    }
    .bintop-r {
      margin-right: 50px;
      height: 30px;
    }
  }
  .bin-text {
    margin-top: 20px;
    font-size: 12px;
    line-height: 30px;
  }
}

:deep(.el-dialog__header) {
  background: #2d2d2d;
  padding: 7px 20px 10px;
}
:deep(.el-dialog__title) {
  line-height: 24px;
  font-size: 13px;
  color: #fff;
}
:deep(.el-dialog__headerbtn) {
  top: 12px;
}
:deep(.el-dialog__body) {
  min-height: 150px;
}

.el-dialog-span {
  height: 100px;
  //   display: block;
  justify-content: space-evenly;

  display: flex;
  .el-dialog-r {
    .a1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #000;
      .span {
        color: #666;
      }
      i {
        display: inline-block;
        background-position: -82px -117px;
        margin: 8px auto;
        width: 68px;
        height: 68px;
        background: url("~@/assets/image/icon2.png") no-repeat 0px -117px;
      }
    }
    .i1 {
      border-right: 1px solid #d9d9d9;
      padding-right: 54px;
    }
  }
}
.stop {
  background-position: -82px -117px !important;
}

.el-dialog-span2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  //   color: #000;
  a {
    color: #000;
  }
  i {
    display: block;
    margin: 8px auto;
    width: 57px;
    height: 58px;
    background: url("~@/assets/image/logo.png") no-repeat 0px -661px;
  }
  .i1 {
    background: url("~@/assets/image/logo.png") no-repeat -91px -661px !important;
  }
}
</style>
